<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    title="统计"
    width="760"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <div class="mb-2 flex" v-if="is_show">
      <!-- <el-tag
        class="mr-2 cursor-pointer"
        :type="index == 0 ? 'primary' : 'info'"
        size="large"
        @click="changeIndex(0)"
        >任务类型</el-tag
      >
      <el-tag
        class="mr-2 cursor-pointer"
        :type="index == 1 ? 'primary' : 'info'"
        size="large"
        @click="changeIndex(1)"
        >任务等级</el-tag
      > -->
      <div
        :class="[
          'py-[12px]',
          'px-[8px]',
          'h-[32px]',
          'flex',
          'justify-center',
          'items-center',
          'border',
          'border-[var(--el-border-color)]',
          'rounded',
          'mr-2',
          'cursor-pointer',
          item.value == active ? 'tabs-active' : '',
        ]"
        v-for="(item, index) in tabs"
        :key="index"
        @click="changeIndex(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <el-button class="mb-2" @click="handleCopy">复制</el-button>
    <vxe-table
      ref="tableRef"
      height="500"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
    >
      <vxe-column title="类型" field="type_text"></vxe-column>
      <vxe-column title="任务数" field="task_count"></vxe-column>
      <vxe-column title="SKU数" field="sku_count"></vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { taskListStatistics } from "../api";
import { ref, reactive, onMounted, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { copy } from "@/utils/index.js";

const data = reactive({
  dialogVisible: false,
  tableAllData: [],
  tableData: [],
  active: 0,
  is_show: false,
  tabs: [
    {
      label: "任务类型",
      value: 0,
    },
    {
      label: "任务等级",
      value: 1,
    },
  ],
  load: false,
});

const { dialogVisible, tableAllData, tableData, active, is_show, tabs, load } = toRefs(
  data
);

const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  is_show.value = data.field.includes("task_type" || "task_priority");
  active.value = 0;

  console.log(active.value);
  dialogVisible.value = true;
  getData(data);
};

const getData = (data) => {
  taskListStatistics(data).then(({ total, data }) => {
    tableAllData.value = data;
    tableData.value = data[0];
  });
};
const handleClose = () => {
  dialogVisible.value = false;
};

defineExpose({ open });

const changeIndex = (val) => {
  active.value = val;
  tableData.value = tableAllData.value[val];
};

const handleCopy = () => {
  let tips = "统计的类型+任务数+SKU数\n";
  tableData.value.forEach((i) => {
    tips += `${i.type_text}：${i.task_count};${i.sku_count};\n`;
  });
  copy(tips);
};
</script>
<style scoped>
:deep(.vxe-pager.is--perfect) {
  border: 0;
}

.tabs-active {
  background-color: var(--base-primary-dark-bg);
  color: #fff;
  border-color: var(--base-primary-dark-bg) !important;
}
</style>
